<template>
	<view class="page-component component-assets">
		<scroll-view class="scroll-view" :scroll-y="true">
			<view class="page-wrapper">
				<view>
					<view class="assets-board">
						<view class="board-title flex-between" @click="boardClickHandle">
							<view>
								<text class="title-text">USDT</text>
								<svg class="icon-eye-switch" width="40" height="32" viewBox="0 0 20 16" fill="none"
									@click="showMeTheMoney = false" v-if="showMeTheMoney"
									xmlns="http://www.w3.org/2000/svg">
									<path fill-rule="evenodd" clip-rule="evenodd"
										d="M10 14C6.71364 14 3.63509 11.7068 2.13345 7.99999C3.63509 4.29317 6.71364 2 10 2C13.2864 2 16.3649 4.29318 17.8665 8.00001C16.3649 11.7068 13.2864 14 10 14ZM10 0C14.5257 0 18.4002 3.30908 20 8.00002C18.4002 12.6909 14.5257 16 10 16C5.47431 16 1.59975 12.6909 0 7.99999C1.59976 3.30906 5.47431 0 10 0ZM13 8C13 9.65685 11.6569 11 10 11C8.34315 11 7 9.65685 7 8C7 6.34315 8.34315 5 10 5C11.6569 5 13 6.34315 13 8ZM15 8C15 10.7614 12.7614 13 10 13C7.23858 13 5 10.7614 5 8C5 5.23858 7.23858 3 10 3C12.7614 3 15 5.23858 15 8Z"
										fill="#E6E6E7" fill-opacity="0.6" />
								</svg>
								<image class="icon-eye-switch" v-else src="../static/images/icon_eye_close@3x.png"
									@click="showMeTheMoney = true" />
							</view>
							<image v-if="walletInfo.name" class="icon-eye-switch"
								src="../static/images/icon/arrow_right@3x.png" />
						</view>
						<view class="board-price">
							<text>{{showMeTheMoney? `$ ${amountFilter(walletTotalUsdt, 2)}`: "*****"}}</text>
							<image class="assets-board-bg" src="../static/images/wallet.png"></image>
						</view>
						<view class="board-group">
							<view class="group-button" @click="handleRechrge">
								<image class="button-icon" src="../static/images/icon/in@3x.png" />
								充值
							</view>
							<view class="group-button" @click="handleWithdrawal">
								<image class="button-icon" src="../static/images/icon/out@3x.png" />
								转账
							</view>
						</view>
					</view>
					<view>
						<view class="tab-wrapper">
							<view class="tab-item" :class="{ active: web3ActiveTab === 1 }" @click="web3ActiveClick(1)">
								资产
							</view>
							<view class="tab-item" :class="{ active: web3ActiveTab === 2 }" @click="web3ActiveClick(2)">
								<image style="width: 32rpx; height: 32rpx; margin-right: 10rpx"
									src="../static/images/icon/hot-nft.png" />NFT
							</view>
						</view>
						<view class="assets-list" v-show="web3ActiveTab === 1">
							<view class="list-item" v-for="item in walletAssetList" :key="item.token"
								@click="handleRecord(item.token,amountFilter(item.balance, 4))">
								<view class="item-main">
									<image class="item-icon" :src="item.icon" />
									<view class="item-name">
										<text class="item-coin">
											{{ item.token }}
											<text class="name-bep" v-if="item.token === 'USDT'">BEP20</text>
										</text>
										<text class="item-exchange">{{
						                      showMeTheMoney
						                        ? `$ ${amountFilter(getPrice(item.token), 2)}`
						                        : "*****"
						                    }}</text>
									</view>
								</view>
								<view class="item-side">
									<text class="item-asset">{{
						                    showMeTheMoney ? amountFilter(item.balance, 4) : "*****"
						                  }}</text>
									<text class="item-exchange text-right">{{
						                    showMeTheMoney
						                      ? `$ ${amountFilter(getUsdtValue(item), 2)}`
						                      : "*****"
						                  }}</text>
								</view>
							</view>
						</view>
						<view class="card-content" v-show="web3ActiveTab===2">
							<mescroll-body :up="upOption" ref="mescrollRef" :bottombar="false" @init="mescrollInit"
								@down="downCallback" @up="upCallback">
								<view class="card-grids">
									<view class="card-grid" v-for="item in lists" :key="item.id"
										@click="handleViewDetail(item)">
										<image v-if="item.nft_image" :src="item.nft_image" mode="aspectFill"
											class="card-img"/>
											<image v-else src="../static/images/zs.jpg" mode="aspectFill"
												class="card-img">
											</image>
											<view class="card-box" v-show="query.status ==2">
												<view class="card-value u-text-left">
													贡献值:{{item.contribution_total || 0}}</view>
												<view class="card-value u-text-left u-m-t-20">
													累计获得：{{item.mining_income_total || 0}} 消费积分</view>
											</view>
									</view>
								</view>
							</mescroll-body>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import BigNumber from "bignumber.js";
	import {
		NftWalletApi
	} from "@/api/modules/NftWallet.js"
	import {
		ServerWalletApi
	} from '@/api/modules/ServerWallet';
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				showMeTheMoney: true,
				walletInfo: {
					name: ""
				},
				walletAssetList: [],
				web3ActiveTab: 1,
				query: {
					type: '',
					status: 2,
					sort: 3,
				},
				lists: [],
				upOption: {
					page: {
						size: 20
					}
				},
			}
		},
		computed: {
			...mapGetters({
				tokenPriceList: 'user/getTokenPriceList',
				walletAddress: "user/getWalletAddress",
				nftConfig: "user/getNftConfig"
			}),
			walletTotalUsdt() {
				let resultBN = new BigNumber(0);
				this.walletAssetList?.forEach((item) => {
					const {
						token,
						balance
					} = item;
					const current = this.tokenPriceList?.find((i) => i.currency === token);
					if (current) {
						const {
							price
						} = current;
						resultBN = resultBN.plus(new BigNumber(price).times(item.balance));
					}
				});
				return resultBN.isNaN() ? "--" : this.amountFilter(resultBN.valueOf());
			}
		},
		mounted() {
			if (!this.tokenPriceList.length) {
				this.fetchTokenPriceList()
			}
			this.$nextTick(async () => {
				await this.getCurrentWalletBalance();
			})
		},
		methods: {
			...mapMutations("user", [
				"SET_TOKEN_PRICE",
			]),
			handleViewDetail(item) {
				uni.navigateTo({
					url: `/pages/mine/mineBalance/nft/detail?id=${item.id}&type=${item.type}`
				})
			},
			upCallback(page) {
				const {
					num,
					size
				} = page
				this.handleFetchNft(num, size)
			},
			async handleFetchNft(num, size) {
				this.$ShowLoading()
				const params = {
					...this.query,
					page: num,
					pageSize: size
				}
				const res = await NftWalletApi.getNftList(params)
				this.$HideLoading()
				if (res.code == 1) {
					const {
						data,
						totalpage
					} = res.data
					if (num == 1) this.lists = [];
					this.lists = this.lists.concat(data)
					this.mescroll.endByPage(data.length, totalpage)
				} else {
					this.$Toast(res.msg)
					this.mescroll.endErr()
				}
			},
			web3ActiveClick(key) {
				this.web3ActiveTab = key
			},
			handleRecord(name, balance) {
				uni.navigateTo({
					url: `/pages/mine/mineBalance/asset/record?name=${name}&balance=${balance}`
				})
			},
			async fetchTokenPriceList() {
				const res = await ServerWalletApi.getTokenPrice()
				const result = Object.entries(res).map(([currency, price]) => ({
					currency,
					price
				}));
				this.SET_TOKEN_PRICE(result)
			},
			boardClickHandle() {

			},
			handleRechrge() {
				uni.navigateTo({
					url: "/pages/mine/mineBalance/asset/recharge"
				})
			},
			handleWithdrawal() {
				uni.navigateTo({
					url: "/pages/mine/mineBalance/asset/withdrawal"
				})
			},
			async getCurrentWalletBalance() {
				try {
					this.walletAssetList = this.nftConfig.tokens.map((item) => ({
						token: item.name,
						balance: "--",
						icon: item.icon,
						contract: item.contract
					}));
					const params = {
						address: this.walletAddress,
						token_contracts: this.nftConfig.tokens.map(item => item.contract).filter(item => item)
					}
					const res = await ServerWalletApi.getBalance(params)
					if (res.code == 0) {
						const apiData = res.data
						const updatedTokens = this.walletAssetList.map((item) => {
							if (item.token === "BNB") {
								item.balance = apiData.eth;
							} else {
								const balance = apiData.token_balances[item.contract];
								if (balance !== undefined) {
									item.balance = balance.toString();
								} else {
									item.balance = "0";
								}
							}
							return item;
						});
						this.walletAssetList = updatedTokens;
					}
				} catch (e) {
					uni.showToast({
						title: "获取余额失败",
						icon: "none",
						duration: 2000,
					});
				}
			},
			amountFilter(val, dotLength) {
				if (val || val === 0) {
					let valStr = val.toString();
					let [integer, dot] = valStr.split(".");

					// 处理负数
					const isNegative = integer.startsWith("-");
					if (isNegative) {
						integer = integer.slice(1);
					}

					// 添加千位分隔符
					integer = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ",");

					// 处理小数点后的位数
					if (dotLength !== undefined) {
						dot = (dot || "").slice(0, dotLength);
					}

					// 组合整数和小数部分
					const formattedValue = isNegative ? `-${integer}` : integer;
					return dot ? `${formattedValue}.${dot}` : formattedValue;
				} else {
					return "";
				}
			},
			getPrice(token) {
				return this.tokenPriceList?.find((i) => i.currency === token)?.price || 0;
			},
			getUsdtValue({
				token,
				balance
			}) {
				const current = this.tokenPriceList?.find((i) => i.currency === token);
				if (current) {
					const {
						price
					} = current;
					const resultBN = new BigNumber(price).times(balance);
					return resultBN.isNaN() ? "--" : resultBN.valueOf();
				}
				return "--";
			}
		}
	}
</script>

<style scoped lang="scss">
	.scroll-view {
		height: calc(100vh - 130rpx);
	}

	.component-assets {
		padding-top: 20rpx;

		.home-top {
			.top-main {
				margin-bottom: 48rpx;

				.main-title {
					margin-top: 16rpx;
					color: $color-text-primary;
					font-weight: 600;
					font-size: 48rpx;
					line-height: 1.3;
				}
			}
		}

		.tool-bar {
			align-items: center;
			column-gap: 48rpx;
			height: 48rpx;

			.tool-end {
				display: flex;
				align-items: center;
				column-gap: 48rpx;
			}

			.tool-icon {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.assets-title {
			display: flex;
			column-gap: 48rpx;
			// margin-top: 166rpx;

			.title {
				color: #78777a;
				font-size: 48rpx;
				line-height: 80rpx;
				font-weight: 600;

				&.active {
					color: $color-text-primary;
				}
			}
		}

		.assets-board {
			background: linear-gradient(95.16deg, #FE572A 8.28%, #D84315 100%);
			color: $color-text-primary;
			padding: 32rpx;
			border-radius: 16rpx;

			.board-title {
				font-size: 28rpx;
				font-weight: 600;
				line-height: 44rpx;
				align-items: center;

				.title-text {
					vertical-align: middle;
				}

				.icon-eye-switch {
					margin-left: 16rpx;
					width: 45rpx;
					height: 45rpx;
					vertical-align: middle;
				}
			}

			.board-price {
				margin-top: 16rpx;
				font-family: Roboto;
				font-size: 48rpx;
				font-weight: 600;
				line-height: 80rpx;

				text {
					font-size: 48rpx;
					font-weight: 600;
					line-height: 80rpx;
				}

				.price-unit {
					font-size: 28rpx;
					margin-left: 14rpx;
				}

				.assets-board-bg {
					position: absolute;
					width: 240rpx;
					height: 240rpx;
					left: 440rpx;
					top: 80rpx;
				}
			}

			.board-group {
				display: flex;
				column-gap: 16rpx;
				margin-top: 16rpx;

				.group-button {
					display: flex;
					flex: 1 1 33%;
					font-family: PingFang SC;
					text-align: center;
					justify-content: center;
					align-items: center;
					background: rgba(230, 230, 231, 0.1);
					color: $color-text-primary;
					border-radius: 16rpx;
					font-size: 28rpx;
					line-height: 44rpx;
					padding: 10rpx;
					gap: 16rpx;
					z-index: 1;
				}

				.button-icon {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.assets-list {
			display: flex;
			flex-direction: column;
			row-gap: 48rpx;
			margin-top: 48rpx;

			.list-item {
				position: relative;
				color: $color-text-primary;
				display: flex;
				justify-content: space-between;
				align-items: flex-start;

				.item-main {
					display: flex;
					column-gap: 32rpx;
					align-items: flex-start;

					.item-icon {
						display: inline-block;
						width: 48rpx;
						height: 48rpx;
					}

					.item-name {
						display: flex;
						flex-direction: column;
						row-gap: 8rpx;

						.item-coin {
							font-family: Inter;
							font-size: 32rpx;
							font-weight: 600;
							line-height: 48rpx;
							color: #333;
						}

						.name-bep {
							color: #ff8819;
							border: 1px solid #ff8819;
							border-radius: 100rpx;
							margin-left: 15rpx;
							padding: 5rpx 10rpx;
							font-size: 24rpx;
						}
					}
				}

				.item-side {
					display: flex;
					flex-direction: column;
					row-gap: 8rpx;
				}

				.item-asset {
					font-family: Roboto;
					font-size: 32rpx;
					font-weight: 600;
					line-height: 48rpx;
					text-align: right;
					color: #333;
				}

				.item-exchange {
					font-family: Roboto;
					font-size: 28rpx;
					font-weight: 400;
					line-height: 44rpx;
					color: #78777a;
				}
			}
		}

		.assets-dashboard {
			margin-top: 40rpx;
			border: 1px solid $color-primary;
			border-radius: 16rpx;
			padding: 30rpx;
			color: $color-text-primary;

			.dashboard-counter-group {
				margin-top: -30rpx;
				margin-bottom: -30rpx;
			}

			.dashboard-counter {
				display: flex;
				padding-top: 40rpx;
				padding-bottom: 40rpx;
				border-bottom: 1px solid $color-primary;

				&.no-border {
					border-bottom: none;
				}

				&:first-child {
					.counter-item:first-child {
						.item-number {
							color: #ff8819;
						}
					}
				}

				.counter-item {
					position: relative;
					flex: 1;
					text-align: center;

					&:after {
						display: block;
						content: " ";
						width: 1px;
						height: 100%;
						position: absolute;
						top: 0;
						right: 0;
						background: $color-primary;
					}

					&:last-child:after {
						display: none;
					}

					.item-number {
						font-size: 48rpx;
					}

					.item-text {
						margin-top: 10rpx;
						font-size: 28rpx;
					}
				}
			}

			.dashboard-code {
				margin-top: 30rpx;
				padding-top: 30rpx;
				border-top: 1px solid $color-primary;

				.code-text {
					display: inline-block;
					vertical-align: middle;
					font-size: 32rpx;
				}

				.code-copy-icon {
					display: inline-block;
					vertical-align: middle;
					width: 32rpx;
					height: 32rpx;
					margin-left: 20rpx;
				}
			}
		}

		.assets-invite-list {
			margin-top: 40rpx;
			border: 1px solid $color-primary;
			border-radius: 16rpx;
			padding: 30rpx;
			color: $color-text-primary;

			.list-item {
				margin-bottom: 30rpx;
				padding-bottom: 30rpx;
				border-bottom: 1px solid $color-primary;

				&:last-child {
					margin-bottom: 0;
					padding-bottom: 0;
					border-bottom: none;
				}

				.item-top {
					display: flex;
					justify-content: space-between;

					.top-main {
						.main-text {
							display: inline-block;
							vertical-align: middle;
							font-size: 28rpx;
						}

						.main-tag {
							display: inline-block;
							vertical-align: middle;
							color: #ff8819;
							border-radius: 16rpx;
							padding: 2rpx 6rpx;
							border: 1px solid #ff8819;
							font-size: 22rpx;
							margin-left: 15rpx;
						}
					}

					.top-side {
						font-size: 24rpx;

						.side-price {
							font-size: 28rpx;
							margin-left: 10rpx;
						}
					}
				}

				.item-table {
					display: flex;
					font-size: 20rpx;
					margin-top: 20rpx;

					&.list-header {
						font-size: 24rpx;
					}

					.item-col {
						flex: 1;

						&:last-child {
							text-align: right;
						}

						&.col-green {
							color: #1bcf63;
						}

						&.col-red {
							color: #ff4949;
						}
					}
				}
			}
		}
	}

	::v-deep .wallet-list-popup {
		height: auto;
		max-height: 80vh;
		overflow-y: auto;
	}

	.wallet-list-popup-content {
		box-sizing: border-box;
		padding: 48rpx 32rpx;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		background: rgba(24, 17, 37, 1);

		.popup-header {
			font-size: 32rpx;
			font-weight: 600;
			line-height: 48rpx;
			color: $color-text-primary;
			margin-bottom: 48rpx;

			.popup-close {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.bsc-add-box {
			padding: 32rpx;
			border-radius: 16rpx;
			border: 2rpx dashed #78777a;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.bsc-title {
				font-size: 32rpx;
				font-weight: 600;
				line-height: 48rpx;
				color: $color-text-primary;
			}

			.bsc-add {
				font-size: 28rpx;
				font-weight: 600;
				line-height: 44rpx;
				color: $color-primary;
			}
		}

		.wallet-list {
			.wallet-item {
				margin-top: 32rpx;
				padding: 32rpx;
				border-radius: 16rpx;
				border: 2rpx solid #1e1c21;
			}

			.item-row {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.item-row-group {
				display: inline-flex;
				align-items: center;
				column-gap: 16rpx;
			}

			.item-name {
				font-family: Inter;
				font-size: 32rpx;
				font-weight: 600;
				line-height: 48rpx;
				color: $color-text-primary;
			}

			.item-address {
				width: 262rpx;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				font-family: Roboto;
				font-size: 28rpx;
				font-weight: 400;
				line-height: 44rpx;
				color: #78777a;
			}

			.item-asset {
				font-family: Roboto;
				font-size: 28rpx;
				font-weight: 600;
				line-height: 44rpx;
				text-align: right;
				color: #e6e6e7;
			}

			.icon-check {
				width: 40rpx;
				height: 40rpx;
			}

			.icon-copy {
				width: 24rpx;
				height: 24rpx;
			}
		}
	}

	::v-deep .create-wallet-popup {
		height: auto;
		max-height: 80vh;
	}

	.create-wallet-popup-content {
		box-sizing: border-box;
		background: #201830;

		.item-block {
			padding: 32rpx;
			text-align: center;
			background: #181125;

			.block-text {
				font-family: PingFang SC;
				font-size: 32rpx;
				font-weight: 400;
				line-height: 48rpx;
				color: #e6e6e7;
			}

			&.item-block {
				margin-top: 2rpx;
			}
		}

		.bottom-block {
			margin-top: 16rpx;
			background: #181125;
			padding: 20rpx 32rpx 88rpx 32rpx;
			text-align: center;

			.bottom-text {
				font-family: PingFang SC;
				font-size: 32rpx;
				font-weight: 400;
				line-height: 48rpx;
				color: #78777a;
			}
		}
	}

	::v-deep .nft-popup-content {
		height: auto;
		max-height: none;
	}

	.nft-popup-content {
		.popup-box {
			height: 100%;
			display: flex;
			flex-direction: column;
		}

		.box-header {
			padding: 32rpx 32rpx;
			color: $color-text-primary;
			text-align: left;
		}

		.box-body {
			flex: 1;
			overflow-y: auto;

			.buy-info {
				padding: 30rpx;

				.info-title {
					font-size: 40rpx;
					color: $color-text-primary;
				}

				.info-price {
					margin: 20rpx 0;
					color: $color-text-primary;

					.price-label {
						display: inline-block;
						font-size: 28rpx;
					}

					.price-money {
						margin-left: 10rpx;
						display: inline-block;
						font-size: 48rpx;

						.money-unit {
							margin-left: 10rpx;
							font-size: 28rpx;
						}
					}

					border-bottom: 1px solid $color-primary;
					padding-bottom: 30rpx;
				}

				.info-meta {
					margin: 30rpx 0;
					padding-bottom: 30rpx;
					border-bottom: 1px solid $color-primary;

					.meta-item {
						display: inline-block;
						color: $color-text-primary;
						margin-right: 30rpx;

						&:last-child {
							margin-right: 0;
						}

						.item-label {
							display: inline-block;
							font-size: 24rpx;
						}

						.item-field {
							display: inline-block;
							margin-left: 10rpx;
							font-size: 28rpx;
							width: 180rpx;
						}
					}
				}

				.info-number {
					.number-form {
						.form-item {
							position: relative;
							margin-top: 20rpx;

							.item-country-icon {
								position: absolute;
								z-index: 1;
								top: 50%;
								transform: translateY(-50%);
								right: 20rpx;
								width: 52rpx;
								height: 48rpx;
							}

							.item-input {
								background-color: #16131C;
								border-radius: 8rpx;
								padding: 22rpx;
								color: $color-text-primary;
								font-size: 24rpx;
							}

							::v-deep .uni-input-placeholder,
							input::placeholder {
								color: rgba($color-text-primary, 0.4);
							}

							&.form-button-group {
								display: flex;
								margin: 40rpx -10rpx 20rpx;

								.group-button {
									flex: 1;
									text-align: center;
									background: #16131c;
									color: #ece5f5;
									font-size: 32rpx;
									padding: 20rpx;
									margin: 0 15rpx;

									&:last-child {
										color: #ece5f5;
										background: linear-gradient(95.16deg,
												#d84cdd 8.28%,
												#6829ef 100%);
									}

									&.disabled {
										opacity: 0.5;
									}
								}
							}

							.item-field {
								position: relative;

								.field-reduce {
									position: absolute;
									left: 0;
									top: 0;
									font-size: 42rpx;
									color: $color-text-primary;
									z-index: 1;
									padding: 0 30rpx;
									height: calc(100% - 2rpx);
									line-height: 1;
									display: flex;
									align-items: center;
								}

								.field-add {
									position: absolute;
									right: 0;
									top: 0;
									font-size: 42rpx;
									color: $color-text-primary;
									z-index: 1;
									padding: 0 30rpx;
									height: calc(100% - 1px);
									line-height: 1;
									display: flex;
									align-items: center;
								}

								.field-input {
									position: relative;
									z-index: 0;

									.item-input {
										border-radius: 8rpx;
										padding: 22rpx;
										color: $color-text-primary;
										font-size: 24rpx;
										text-align: center;
									}

									::v-deep .uni-input-placeholder,
									input::placeholder {
										color: rgba($color-text-primary, 0.7);
									}
								}

								.field-meta {
									display: flex;
									color: $color-text-primary;
									justify-content: space-between;
									font-size: 28rpx;
								}
							}

							.note {
								color: #ca6830;
								background-color: #251b16;
							}
						}

						.img-nft-gift {
							display: block;
							width: 240rpx;
							height: 240rpx;
							margin: 0 auto 32rpx auto;
							border-radius: 32rpx;
						}

						.item-card {
							padding: 32rpx;
							border-radius: 16rpx;
							background-color: #16131c;
						}

						.item-text {
							color: #ece5f5;
							text-align: center;
							padding: 16rpx;
							font-size: 28rpx;
						}
					}
				}
			}
		}
	}

	.nft-list {
		padding-bottom: 220rpx;
	}

	.nft-list-box {
		display: flex;
		flex-direction: column;
		row-gap: 16rpx;

		.nft-item {
			background-color: #16131C;
			color: $color-text-primary;
			border-radius: 32rpx;
			padding: 32rpx;
			display: flex;
			column-gap: 32rpx;
			justify-content: space-between;
			align-content: space-between;

			.item-img-wrapper {
				width: 240rpx;
				height: 240rpx;
				position: relative;
			}

			.item-img {
				width: 240rpx;
				height: 240rpx;
				border-radius: 16rpx;
			}

			.item-info {
				flex: 1 1;

				.description-bar {
					.item-label {
						font-size: 24rpx;
					}

					.item-field {
						font-family: -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu,
							Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
						font-size: 24rpx;
					}
				}
			}

			.name {
				font-family: PingFang SC;
				font-size: 32rpx;
				font-weight: 600;
				line-height: 44rpx;
				color: #ece5f5;
				display: flex;
				justify-content: flex-start;
			}
		}

		.nft-button-group {
			display: flex;
			justify-content: space-between;
			margin-bottom: 32rpx;

			.nft-button {
				flex: 1;
				padding: 12rpx 20rpx;
				font-size: 28rpx;
				text-align: center;
				border-radius: 40rpx;
				background: rgba(230, 230, 231, 0.1);
				color: $color-text-primary;

				margin-right: 16rpx;
				background: linear-gradient(95.16deg, #d84cdd 8.28%, #6829ef 100%);

				&.unstake {
					background: #16131c !important;
				}
			}
		}
	}

	.reward-box {
		padding: 0, 32rpx;
		padding-bottom: 64rpx;
		// margin-top: 40rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		row-gap: 24rpx;
	}

	.reward-item {
		/* frame 3 */
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0 26rpx;
		border-radius: 16rpx;
		height: 202rpx;
		left: calc(50% - 686rpx / 2);
		top: 756rpx;
		background-color: #16131c;

		.reward-info {
			/* Group 72 */
			width: 400rpx;
			height: 112rpx;
			left: 64rpx;
			top: 798rpx;
			display: flex;
			flex-direction: column;
			row-gap: 16rpx;

			.reward-title {
				display: flex;
				width: 280rpx;
				flex-direction: row;
				column-gap: 16rpx;

				.reward-icon {
					/* Vector */
					width: 40rpx;
					height: 40rpx;
				}

				.reward-text {
					/* 累积总收益 */
					width: 280rpx;
					height: 38rpx;

					font-family: "Inter";
					font-style: normal;
					font-weight: 400;
					font-size: 32rpx;
					line-height: 38rpx;

					color: #ffffff;
				}
			}

			.reward-value {
				/* 321,210.539 LK */

				width: 100%;
				height: 48rpx;

				font-family: "Roboto";
				font-style: normal;
				font-weight: 800;
				font-size: 36rpx;
				line-height: 48rpx;
				padding-left: 54rpx;
				/* identical to box height, or 133% */

				color: #ece5f5;
			}
		}
	}

	.reward-button {
		background: linear-gradient(95.16deg, #d84cdd 8.28%, #6829ef 100%);
		border-radius: 30rpx;
		padding: 12rpx 20rpx;
		font-size: 28rpx;
		text-align: center;
		color: #ffffff;

		&.disabled {
			opacity: 0.5;
		}
	}

	.reward-button-record {
		position: absolute;
		border-radius: 15rpx;
		padding: 12rpx 20rpx;
		font-size: 28rpx;
		text-align: center;
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12rpx;
		left: 600rpx;
		top: 947rpx;

		.record-icon {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.nft-reward-button-record {
		position: absolute;
		border-radius: 15rpx;
		padding: 12rpx 20rpx;
		font-size: 28rpx;
		text-align: center;
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12rpx;
		left: 592rpx;
		top: 1165rpx;

		.record-icon {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.page-wrapper {
		padding: 1rem;
	}

	.tab-wrapper {
		display: flex;
		color: #333;
		margin: 32rpx 0 32rpx 0;
		padding-bottom: 16rpx;
		position: relative;
		column-gap: 32rpx;

		.tab-item {
			position: relative;
			font-size: 28rpx;
			font-weight: 300;
			line-height: 44rpx;

			&.active {
				color: var(--mainColor);
			}

			&.active:after {
				position: absolute;
				display: block;
				content: " ";
				width: 100%;
				height: 2rpx;
				bottom: -18rpx;
			}
		}
	}

	.card-content {
		padding-bottom: 100rpx;
	}

	.card-grids {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32rpx;
		position: relative;
	}

	.card-checkbox {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		z-index: 1;
	}

	.card-grid {
		border: 1px solid #eaeaea;
		border-radius: 16rpx;
		overflow: hidden;
		position: relative;
	}

	.card-img {
		width: 100%;
		height: 360rpx;
	}

	.card-box {
		padding: 20rpx;
		text-align: center;
		font-size: 28rpx;
	}
</style>